<template>
  <div class="" v-loading="loading">
    <div>
      <el-container class="detail-container-with">
        <div style="margin:10px 0 0 0">
          <div class="attract-title">演出详情</div>
          <div class="attract-title2">PERFORMANCE SHOWCASE</div>
          <el-card>
            <div class="detail-content-container">
              <div class="goods-info clearfix">
                <div class="gallery-list">
                  <e-xiangqingxinxi :images="map.perImage"></e-xiangqingxinxi>
                </div>
                <div class="goods-right-content">
                  <h3 class="content-title">
                    <span class="content-name">{{ map.perName }}</span>
                  </h3>
                  <div class="content-details">
                    <div class="detail-item">
                      <i class="el-icon-location detail-icon"></i>
                      <span class="detail-label">
                        演出地点：
                      </span>
                      <span class="detail-value">
                        {{ map.perPlace }}
                      </span>
                    </div>
                    <div class="detail-item">
                      <i class="el-icon-user detail-icon"></i>
                      <span class="detail-label">
                        表演者：
                      </span>
                      <span class="detail-value">
                        {{ map.performer }}
                      </span>
                    </div>
                    <div class="detail-item">
                      <i class="el-icon-time detail-icon"></i>
                      <span class="detail-label">
                        演出时间：
                      </span>
                      <span class="detail-value">
                        {{ map.perDate }}
                      </span>
                    </div>
                    <div class="detail-item">
                      <i class="el-icon-menu detail-icon"></i>
                      <span class="detail-label">
                        分类：
                      </span>
                      <span class="detail-value">
                        <e-select-view module="performance_type" :value="map.perType" select="id"
                          show="type"></e-select-view>
                      </span>
                    </div>
                    <div class="detail-item">
                      <span class="detail-value1">￥{{ map.perPrice }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="goods-content" v-html="map.perDescription"></div>
            </div>
          </el-card>
        </div>

      </el-container>
    </div>
  </div>
</template>
<style type="text/scss" scoped lang="scss">
.detail-content-container {
  position: relative;
  line-height: 1.8;
  letter-spacing: 0.1em;
  margin-top: 30px;
  ::v-deep img{
    width: 100%;
    height: 100%;
  }

}

.detail-container-with {
  margin-left: 100px;
  margin-right: 100px;
}

.content-title {
  font-size: 28px;
  font-weight: 600;
  color: #333333;
  display: flex;
  align-items: center;
  margin-bottom: 1px;
  margin-top: -10px;

  .content-name {
    margin-left: 20px;
    text-align: center;
    font-size: 28px;
    font-weight: 700;
  }
}

.content-details {
  font-family: 'Arial, sans-serif';
  margin: 0px 20px;
  .detail-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding: 5px 0;
    border-bottom: 1px solid #f0f0f0;

    .detail-icon {
      font-size: 20px;
      margin-right: 10px;
      color: #81b3c7;
    }

    .detail-label {
      font-size: 16px;
      font-weight: 500;
      color: #666666;
      width: 120px;
    }

    .detail-value {
      font-size: 16px;
      font-weight: 400;
      color: #333333;
    }
    .detail-value1{
      font-size: 18px;
      font-weight: 400;
      color: #f87a7a;
    }
  }
}
.goods-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .gallery-list {
    flex-shrink: 0;
    margin-left: 5%;
    margin-right: -10px;
    width: 499px;
    height: 283px;
    margin-bottom: 67px;
    z-index: 1;

    ::v-deep .el-carousel__container {
      position: relative;
      height: 349px;
    }
  }

  .goods-right-content {
    background-color: white;
    padding: 10px;
    box-shadow: 0 2px 10px rgb(0 0 0 / 10%);
    margin-left: -182px;
    height: 335px;
    width: 559px;
    margin-top: 2px;
    z-index: 2;

    .custom-hr {
      margin-top: -20px;
      margin-bottom: -24px;
      border: 0;
      border-top: 1px solid #b1aaaa;
      width: 100%;
    }
    ::v-deep .el-button.is-circle {
      background: #81b3c7;
      border: 1px solid #81b3c7;
      margin-left: 15px;
    }

  }
}

.goods-content {
  margin-top: 15px;
  padding: 20px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-family: 'Arial, sans-serif';
  font-size: 16px;
  color: #333;
  line-height: 1.6;
  text-indent: 2em; /* 首行缩进两个字符 */
}

.attract-title {
  text-align: center;
  font-size: 25px;
  width: 100%;
}

.attract-title2 {
  margin-bottom: 3%;
  color: #8c8c8c;
  text-align: center;
  font-size: 17px;
  width: 100%;
}
</style>
<script>
import api from '@/api';
import { extend } from '@/utils/extend';
export default {
  data() {
    return {
      loading: false,   // 加载
      isFavorite: false, // 是否已经收藏
      map: {
        perName: '',
        perType: '',
        performer: '',
        perPlace: '',
        perDate: '',
        perPrice: '',
        perDescription: '',
        perImage: '',
      },
    }
  },
  props: {
    id: {
      type: [String, Number],
      required: true
    }
  },
  watch: {
    id: {
      handler() {
        this.loadDetail();
      },
      immediate: true
    },
  },
  computed: {
  },
  methods: {
    loadDetail() {
      if (this.loading) return;
      this.loading = true;
      this.$get(api.performanceInfo.webdetail, {
        id: this.id
      }).then(res => {
        this.loading = false;
        if (res.code == api.code.OK) {
          extend(this, res.data);
        } else {
          this.$message.error(res.msg);
        }
      }).catch(err => {
        this.loading = false;
        this.$message.error(err.message);
      });
    },

  },
  created() {
  },
  mounted() {
  },
  destroyed() {
  }
}
</script>